import React, { Component } from 'react'
import {Row, Col, Card, Icon } from 'antd'
import chart1 from './chart1'
import chart2 from './chart2'

export default class Welcome extends Component {
    constructor(props) {
        super(props);
        this.state={

        }
    }
    componentWillMount() {
        (function($){
            $.fn.numberRock=function(options){
                var defaults={
                    speed:24,
                    count:100
                };
                var opts=$.extend({}, defaults, options);

                var div_by = 100,
                count=opts["count"],
                speed = Math.floor(count / div_by),
                sum=0,
                $display = this,
                run_count = 1,
                int_speed = opts["speed"];
                var int = setInterval(function () {
                    if (run_count <= div_by&&speed!=0) {
                        $display.text(sum=speed * run_count);
                        run_count++;
                    } else if (sum < count) {
                        $display.text(++sum);
                    } else {
                        clearInterval(int);
                    }
                }, int_speed);
            }

        })(jQuery);
        
    }
    componentDidMount() {
        chart1();
        chart2();
        $(".ljyds").numberRock({
            speed:30,//数字越大数字滚动速度越慢
            count:50//最终停留数字
        })
        $(".ywcyds").numberRock({
            speed:30,
            count:20
        })
        $(".zzzyyds").numberRock({
            speed:30,
            count:10
        })
        $(".dzyyds").numberRock({
            speed:30,
            count:20
        })
        $(".zxq").numberRock({
            speed:30,
            count:5000
        })
        $(".ywcfhs").numberRock({
            speed:30,
            count:2000
        })
        $(".dfhs").numberRock({
            speed:30,
            count:3000
        })
    }
    
    render() {
        const span5 = 6;
        const gutterBox = {
            // background: '#00A0E9',
            cursor:'pointer',
            padding:'5px 0 20px',
        }
        const blueBlock = {
            color: 'rgb(108,81,179)',width:'45%', height: '40%',padding:'5px 0', margin:'5px',float:'left',backgroundColor: 'rgb(218,227,233)'
        }
        return(
            <div style={{backgroundColor:'#ffffff', padding:'8px 32px 8px', height:'100%'}}>
                <Row style={{height:'8%'}}>
                    <h1 style={{fontSize:'12px',marginLeft:'-16px',fontWeight:'bold'}}>原材料预约信息</h1>
                </Row>
                <Row style={{height:'30%'}} type="flex" justify="space-around">
                    <Col style={gutterBox} span={span5}>
                        <h2 style={{color: 'rgb(108,81,179)', fontSize:'12px'}}><Icon type="copy" /> 预约看单</h2>
                        <div style={{width:'100%', height:'100%'}}>
                            <div className='center-center-column' style={blueBlock}>
                                <p className='kdnum' style={{fontSize:'20px',fontWeight:'bold'}}>256</p>
                                <p style={{color:'#666'}}>看单总数</p>
                            </div>
                            <div className='center-center-column' style={blueBlock}>
                                <p style={{fontSize:'20px',fontWeight:'bold'}}>198</p>
                                <p style={{color:'#666'}}>已收看单</p>
                            </div>
                            <div className='center-center-column' style={blueBlock}>
                                <p style={{fontSize:'20px',fontWeight:'bold'}}>58</p>
                                <p style={{color:'#666'}}>未收看单</p>
                            </div>
                            <div className='center-center-column' style={blueBlock}>
                                <p><Icon type="solution" style={{fontSize:'18px',paddingTop:'6px',height:'28px'}} /></p>
                                <p style={{color:'#666'}}>趋势图</p>
                            </div>
                        </div>
                    </Col>
                    <Col style={gutterBox} span={span5}>
                        <h2 style={{color: 'rgb(108,81,179)', fontSize:'12px'}}><Icon type="copy" /> 免预约看单</h2>
                        <div style={{width:'100%', height:'100%'}}>
                            <div className='center-center-column' style={blueBlock}>
                                <p style={{fontSize:'20px',fontWeight:'bold'}}>58</p>
                                <p style={{color:'#666'}}>看单总数</p>
                            </div>
                            <div className='center-center-column' style={blueBlock}>
                                <p style={{fontSize:'20px',fontWeight:'bold'}}>40</p>
                                <p style={{color:'#666'}}>已收看单</p>
                            </div>
                            <div className='center-center-column' style={blueBlock}>
                                <p style={{fontSize:'20px',fontWeight:'bold'}}>18</p>
                                <p style={{color:'#666'}}>未收看单</p>
                            </div>
                            <div className='center-center-column' style={blueBlock}>
                                <p><Icon type="solution" style={{fontSize:'20px',paddingTop:'6px',height:'28px'}} /></p>
                                <p style={{color:'#666'}}>趋势图</p>
                            </div>
                        </div>
                    </Col>
                    <Col style={gutterBox} span={span5}>
                        <h2 style={{color: 'rgb(108,81,179)', fontSize:'12px'}}><Icon type="copy" /> T日看单</h2>
                        <div style={{width:'100%', height:'100%'}}>
                            <div className='center-center-column' style={blueBlock}>
                                <p style={{fontSize:'20px',fontWeight:'bold'}}>378</p>
                                <p style={{color:'#666'}}>看单总数</p>
                            </div>
                            <div className='center-center-column' style={blueBlock}>
                                <p style={{fontSize:'20px',fontWeight:'bold'}}>342</p>
                                <p style={{color:'#666'}}>已收看单</p>
                            </div>
                            <div className='center-center-column' style={blueBlock}>
                                <p style={{fontSize:'20px',fontWeight:'bold'}}>36</p>
                                <p style={{color:'#666'}}>未收看单</p>
                            </div>
                            <div className='center-center-column' style={blueBlock}>
                                <p><Icon type="solution" style={{fontSize:'20px',paddingTop:'6px',height:'28px'}} /></p>
                                <p style={{color:'#666'}}>趋势图</p>
                            </div>
                        </div>
                    </Col>
                    <Col style={gutterBox} span={span5}>
                        <h2 style={{color: 'rgb(108,81,179)', fontSize:'12px'}}><Icon type="car" /> 车辆情况</h2>
                        <div className='center-center-column' style={{height:'87%',margin:'5px',width:'100%',backgroundColor: 'rgb(218,227,233)'}}>
                            <div id='barChart' style={{width: '100%', height: '100%'}}></div>
                        </div>
                    </Col>
                </Row>
                <Row style={{height:'8%'}}>
                    <h1 style={{fontSize:'12px',marginLeft:'-16px',fontWeight:'bold'}}>成品发货信息</h1>
                </Row>
                <Row style={{height:'54%'}} type="flex" justify="space-around">
                    <Col span={11}>
                        <div style={{overflow:'hidden',height:'38%',fontSize:'12px',color: '#666',}}>
                            <h2 style={{height:'20%',color: 'rgb(108,81,179)'}}><Icon type="car" /> 车辆情况</h2>
                            <div style={{height:'80%'}}>
                                <div style={{float:'left',width:'25%',height:'100%',display: 'flex', flexDirection: 'row', alignItems: 'center',justifyContent: 'center'}}>
                                    <div style={{border:'6px solid #eaf6ff',float:'left', borderRadius:'50%',}}>
                                        <div style={{border:'6px solid #b3deff', width:'80px', height:'80px',textAlign:'center',lineHeight:'70px', borderRadius:'50%', backgroundColor:'#35a7ff'}}>
                                            <span style={{color:'#ffffff',fontSize:'26px'}}>36</span>
                                            <span style={{color:'#ffffff'}}> 辆</span>
                                        </div>
                                    </div>
                                   </div>
                                <div style={{float:'left',textAlign:'center',height:'100%', width:'25%',}} className='center-center-column'>
                                    <p><span style={{fontSize:'26px',color:'#1ac38a'}}>20</span> 辆</p>
                                    <p>已完成</p>
                                </div>
                                <div style={{float:'left',textAlign:'center',height:'100%', width:'25%',}} className='center-center-column'>
                                    <p><span style={{fontSize:'26px',color:'#37a7fb'}}>6</span> 辆</p>
                                    <p>正在作业</p>
                                </div>
                                <div style={{float:'left',textAlign:'center',height:'100%', width:'25%',}} className='center-center-column'>
                                    <p><span style={{fontSize:'26px',color:'#ccc06e'}}>10</span> 辆</p>
                                    <p>正在排队</p>
                                </div>
                            </div>
                        </div>
                        <div style={{overflow:'hidden',height:'62%'}}>
                            <h2 style={{height:'40px',lineHeight:'40px',color: 'rgb(108,81,179)',fontSize:'12px'}}><Icon type="file" /> 运单情况</h2>
                            <div style={{width:'100%',height:'35%'}}>
                                <div style={{float:'left',width:'25%',backgroundColor:'#37a6ff',height:'100%', color:'#ffffff'}} className='center-center-column'>
                                    <p><span className='ljyds' style={{fontSize:'24px'}}>50</span> 单</p>
                                    <p style={{fontSize:'12px'}}>累计运单数</p>      
                                </div>
                                <div style={{float:'left',width:'25%',backgroundColor:'#58b6ff',height:'100%', color:'#ffffff'}} className='center-center-column'>
                                    <p><span className='ywcyds' style={{fontSize:'24px'}}>20</span> 单</p>
                                    <p style={{fontSize:'12px'}}>已完成运单数</p>      
                                </div>
                                <div style={{float:'left',width:'25%',backgroundColor:'#74c3fe',height:'100%', color:'#ffffff'}} className='center-center-column'>
                                    <p><span className='zzzyyds' style={{fontSize:'24px'}}>10</span> 单</p>
                                    <p style={{fontSize:'12px'}}>正在作业运单数</p>      
                                </div>
                                <div style={{float:'left',width:'25%',backgroundColor:'#97d1ff',height:'100%', color:'#ffffff'}} className='center-center-column'>
                                    <p><span className='dzyyds' style={{fontSize:'24px'}}>20</span> 单</p>
                                    <p style={{fontSize:'12px'}}>待作业运单数</p>      
                                </div>
                            </div>
                            <div style={{width:'100%',height:'35%',marginTop:'15px'}}>
                                <div style={{float:'left',width:'33.33%',backgroundColor:'#16c489',height:'100%', color:'#ffffff'}} className='center-center-column'>
                                    <p><span className='zxq' style={{fontSize:'24px'}}>5000</span> 台</p>
                                    <p style={{fontSize:'12px'}}>总需求</p> 
                                </div>
                                <div style={{float:'left',width:'33.33%',backgroundColor:'#39d39f',height:'100%', color:'#ffffff'}} className='center-center-column'>
                                    <p><span className='ywcfhs' style={{fontSize:'24px'}}>2000</span> 台</p>
                                    <p style={{fontSize:'12px'}}>已完成发货数</p> 
                                </div>
                                <div style={{float:'left',width:'33.33%',backgroundColor:'#61deb4',height:'100%', color:'#ffffff'}} className='center-center-column'>
                                    <p><span className='dfhs' style={{fontSize:'24px'}}>3000</span> 台</p>
                                    <p style={{fontSize:'12px'}}>待发货数</p> 
                                </div>
                            </div>
                        </div>
                    </Col>
                    <Col span={11}>
                        <h2 style={{height:'8%',color: 'rgb(108,81,179)',fontSize:'12px'}}><Icon type="database" /> 成品库存</h2>
                        <div id='barChart2' style={{width: '100%', height: '92%'}}></div>
                    </Col>
                </Row>
            </div>
        )
    }
}
